<template>
    <div class="RedPacketDetail">
        <div class="detail-top"><img :src="logo"/> <em> {{merchant_name}} 送您一个大红包</em> </div>
        <div class="detail-money">恭喜您，本次获得 <em>{{money}} 元</em></div>
        <hr>
        <p class="ling">【 分享朋友圈可再领一次 】</p>
        <img src="../../../assets/hwz.jpg" class="RedPacketDetailimg"/>
        <p class="detail-text">扫描二维码   查看 、提现</p>
        <a class="detailBtn" @click="detailBtn">我要发红包</a>
        <p class="detail-footer">惠万众</p>
        <!-- 规则介绍 -->
        <div class="black" v-show="isShow2"></div>
        <div class="rule" v-show="isShow">
            <p>规则介绍</p>
            <p>本活动必须在商家已经申请加盟【惠万众】后，且使用该功能进行发红包，用户方可参与。</p>
            <a v-if="is == 1" class="xieyi">！您还没有查看协议</a>
            <router-link :to="'/JoinIn/' + merchant_id" class="link" v-if="is == 0">确定</router-link>
            <p class="yue">
                <img src="../../../assets/yue.png" v-show="is == 1" @click="look"/> 
                <img src="../../../assets/yue1.png" v-show="is == 0" @click="look"/> 
                <!-- <img :src="this.is== true ? require('../../assets/yue.png') : require('../../assets/yue1.png')" /> -->
                查看<a>《用户协议》</a>和<a>《惠万众商户规则》</a>
            </p>
            <i @click="times">&times;</i>
        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    import url from 'url'
    export default {
        name:'RedPacketDetail',
        data () {
            return {
                isShow:false,
                isShow2:false,
                is:0,
                xieyi:false,
                money:'',
                merchant_name:'',
                url:'http://api.huiwanzhong365.com/',
                logo:'',
                merchant_id:'',
            }
        },
        methods: {
            switchTo(path){
                // console.log(this.$router)
                this.$router.push(path)
            },
            look:function(){
                if( this.is == 1){
                    this.is = 0
                }else{
                    this.is = 1
                }
            },
            //获取红包金额
            getmoney: function() {
                var uo = url.parse(window.location.href, true)
                //console.log(uo)
                console.log(uo, this.$router)
                var that = this
                var openid = localStorage.getItem("openid")
                console.log(that.$route)
                that.money = that.$route.query.money
                var draw = {
                    openid:openid,
                    activity_id:uo.query.activity_id,      
                }
                this.$http.post('/index/merchant/drawdetails',qs.stringify(draw)).then(res=>{
                    console.log(res.data)
                    that.merchant_name = res.data.merchant_name,
                    that.logo = this.url + res.data.logo,
                    that.merchant_id = res.data.merchant_id,
                    that.share(res)
                }).catch(err=>{
                    console.log(err)
                }) 
            },
            detailBtn:function(){
                this.isShow = true;
                this.isShow2 = true
            },
            times:function(){
                this.isShow = false;
                this.isShow2 = false
            },
            // 分享领第三次
            click:function(){
                //console.log('123')
                var that = this
                var uo = url.parse(window.location.href, true)
                var openid = localStorage.getItem("openid")
                var draw1 = {
                    activity_id:uo.query.activity_id, 
                    openid:openid,
                }
                that.$http.post('/index/merchant/redPacket',qs.stringify(draw1)).then(res=>{
                    console.log(res.data)
                    this.red = res.data
                    that.$router.push({name:'RedPacket'});
                }).catch(err=>{
                    console.log(err)
                })
            },
            share:function(res){
                console.log(res.data.merchant_name)
                console.log(this.url + res.data.logo)
                var that = this
                wx.ready(function(){
                    //alert('111111')
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    wx.onMenuShareAppMessage({
                        title: res.data.merchant_name +'(滨江道店)', // 分享标题
                        desc: '送您一个红包，可提现至微信', // 分享描述
                        link: window.location.href +'/'+localStorage.getItem("openid"), // 分享链接
                        // imgUrl:'http://huiwanzhong.ay1.cc' + res.data.logo , // 分享图标
                        imgUrl:'http://www.huiwanzhong365.com/img/hongbao.png',
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        success: function () { 
                            alert("分享成功");
                            that.click();
                        },
                        cancel: function () { 
                            alert("未分享!");
                        }
                    });
                    //分享
                    wx.onMenuShareTimeline({
                        title: res.data.merchant_name +'(滨江道店)', // 分享标题
                        desc: '送您一个红包，可提现至微信', // 分享描述
                        link: window.location.href +'/'+localStorage.getItem("openid"), // 分享链接
                        imgUrl:'http://www.huiwanzhong365.com/img/hongbao.png', // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            alert("分享成功");
                            that.click();
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                            alert("未分享!");
                        }
                    });
                });
            },
            
        },
        created(){
             
        },
        mounted() {
            this.getmoney();
        }
    }
</script>

<style scoped>
html{
    width: 100%;
    height: 100%;
}
.yue img{
    width: 14px;
    margin-left: 3%;
    vertical-align: sub;
}
.yue a{
    color:#259B24;
}
.xieyi{
    width:100%;
    display: inline-block;
    color:#F00;
    text-align: center;
}
.black{
    background:rgba(0, 0, 0, 0.3);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 19;
}
.rule{
    position: fixed;
    width: 80%;
    top: 30%;
    left: 10%;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    z-index: 20;
    text-align: center;
}
.rule p:nth-child(1){
    font-size:18px;
    font-weight: 600;
    margin-top:15px;
}
.rule p:nth-child(2){
    font-size:13px;
    margin-top:15px;
    text-indent:30px;
    width:94%;
    margin-left:3%;
    line-height: 24px;
    color:#999;
}
.rule p:nth-child(4){
    font-size:12px;
    text-align: center;
    margin-top:10px;
    margin-bottom: 15px;
}
.rule p:nth-child(4) a{
    color:#259B24;
}
.rule i{
    color:#FFF;
    background: #BBB;
    width:20px;
    height:20px;
    border-radius: 50%;
    text-align: center;
    font-size:16px;
    position: absolute;
    top:10px;
    right: 10px;
    line-height: 20px;
}
.link{
    width: 120px;
    text-align: center;
    height: 38px;
    color: #FFF;
    border-radius: 5px;
    background: #000;
    margin-top: 15px;
    border: 0;
    display: inline-block;
    line-height: 38px;
}
.RedPacketDetail{
    background: #FF3914;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ling{
    width:100%;
    text-align: center;
    font-size:12px;
    margin-top:20px;
    color:#FFF;
}
hr{
    width: 94%;
    margin-left: 3%;
    border: 0;
    border-top: 1px solid #ccc;
}
.detail-top{
    position:fixed;
    top:0;
    left:0;
    height:44px;
    width:100%;
    background:rgba(0, 0, 0, 0.3);
    text-align: left;
}
.detail-top img{
    width: 30px;
    height: 30px;
    margin-left: 15px;
    vertical-align: middle;
}
.detail-top em{
    line-height: 44px;
    color:#FFF;
}
.RedPacketDetailimg{
    width:200px;
    height:200px;
    margin-top:20px;
}
.detail-money{
    margin-top:90px;
    margin-bottom: 50px;
    color:#FFF;
}
.detail-money em{
    font-size:24px;
    font-weight: 600;
}
.detail-text{
    margin-top:30px;
    color:#FFF;
}
.detail-footer{
    position:fixed;
    bottom:0;
    left:0;
    height:25px;
    width:100%;
    background:rgba(0, 0, 0, 0.3);
    text-align: center;
    line-height: 25px;
    color:#FFF;
}
.detailBtn{
    color: #A22D0A;
    background: #FFEA58;
    display: inline-block;
    padding: 6px 10px;
    border: 0;
    border-radius: 3px;
    font-weight: 600;
    margin-top: 30px;
}
</style>